<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="../imgs/01.jpg" >
		<br/><br/>
		<button type="button" id="btn1">开始</button>
		<button type="button" id="btn2">停止</button>
		<button type="button" id="btn3">加速</button>
		<button type="button" id="btn4">减速</button>
	</body>
	<script>
		    var timer =null;
				var oImg=document.querySelector('img')
				var oBtn =document.querySelectorAll('button')
				console.log(oBtn)
				var i =1;
				var speed=30;
				oBtn[0].onclick=function(){
					//每次先把上一次的定时器清空
					clearInterval(timer)
					 timer=setInterval(function(){
						  oImg.src="../imgs/0"+i+".jpg";
							//i>=6 ? i=1:i++;
							i =i % 6;//利用模把i恢复到原值
							i++;
							console.log(speed)
					 },speed);
				}
				oBtn[1].onclick=function(){
					clearInterval(timer)
				}
				oBtn[2].onclick=function(){
					 speed-=300
					 console.log(speed)
				}
				oBtn[3].onclick=function(){
					 speed+=300
					 console.log(speed)
				}
				
	</script>
</html>
